<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <link rel="stylesheet" href="./js/ol3/ol.css">
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/ol3/ol-debug.js"></script>
    <script type="text/javascript" src="./js/ol3/overlay.js"></script>
    <script type="text/javascript" src="./js/coordTransform.js"></script>
    <script type="text/javascript" src="./js/data.js"></script>
    <script type="text/javascript" src="./js/component/olMap.js"></script>
    <script type="text/javascript" src="./js/component/util.js"></script>
    <script type="text/javascript" src="./js/component/listener.js"></script>
    <script type="text/javascript" src="./js/component/baseTrack.js"></script>
    <script type="text/javascript" src="./js/component/trackPlayer.js"></script>
    <script type="text/javascript" src="./js/component/olTrack.js"></script>

    <style type="text/css">
        html,
        body,
        .content,
        #mapContainer {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        .content {
            position: relative;
        }
        
        #mapContainer {
            left: 0;
            right: 0;
            top: 0;
            position: absolute;
            z-index: 10;
        }
        
        #rightPanel {
            right: 0;
            top: 100px;
            height: 300px;
            width: 200px;
            position: absolute;
            z-index: 100;
            background: rgba(186, 200, 211, 0.6);
        }
    </style>

    <script type="text/javascript">
        olMap.ready(function() {

            //实例化地图
            var map = olMap.Map.getInstance({
                el: 'mapContainer',
                center: [12731610.699436761, 2578464.6311329417],
                zoom: 12
            });

            //实例化播放器实例
            var player = legendofkage.TrackPlayer();
            setDataSource = function() {

                datasource.ListTL.forEach(function(item, index) {
                    var olTrack = new legendofkage.OlTrack(map, {
                        dataSource: item,
                        autoAdjustViewport: true,
                        speed: 200,
                        calcDistance: false,
                        personMarker: {
                            label: {
                                text: '张学友'
                            }
                        }
                    });
                    //注册轨迹的单击事件，截获marker的事件
                    olTrack.addEventListener('click', function(e) {
                        alert(JSON.stringify(e));
                    })
                    player.addTrack(olTrack);
                });

                var tracks = player.getTrack();
                tracks.forEach(function(item) {
                    item.dataAdapter(function(target, from) {
                        target.point = [from.BdX, from.BdY];
                        target.date = from.Date;
                        target.dateString = from.DateString;
                        return target;
                    });
                })
            }

            document.getElementById('cmpSpeed').addEventListener('change', function() {
                player.setPlaySpeed(this.value);
            })

            document.getElementById('userTrack').addEventListener('click', function() {
                if (player.getTrack().length == 0) {
                    setDataSource();
                }
                if (player.getState() != "playing") {
                    player.play();
                } else if (player.getState() == "playing")
                    player.pause();
            })

            document.getElementById('stopBtn').addEventListener('click', function() {
                player.stop();
            })

        });
    </script>
</head>

<body>
    <div class="content">
        <div id="mapContainer">
        </div>
        <div id="rightPanel">
            <p>
                速率：
                <select id="cmpSpeed">
                <option value="300" selected="selected">1X</option>
                <option value="200">2X</option>
                <option value="100">3X</option>
            </select>
                <input id="userTrack" data-uid="2928" type="button" value="轨迹回放" /><br/>
                <input id="stopBtn" type="button" value="停止播放" />
            </p>
            <p style="font-size:12px;">
                单击“播放中”，将切换到暂停，再单击将继续之前的进度播放！如果想彻底停止，请单击停止播放按钮<br/>
            </p>
        </div>
    </div>
</body>

</html>